@{ Layout = "~/Views/Shared/_Layout.cshtml"; }

<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            对账单管理
            <small>对账单列表</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-home"></i> 首页</a></li>
            <li><a href="#">财务管理</a></li>
            <li class="active">对账单</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title">对账单列表</h3>
                        <div class="box-tools">
                            <button type="button" class="btn btn-primary" onclick="AddAccount()">
                                <i class="fa fa-plus"></i> 新增对账单
                            </button>
                        </div>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div id="account-table" class="avue-crud" ref="crud">
                        </div>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->
</div>

<script>
    var vm = new Vue({
        el: '#account-table',
        data: function () {
            return {
                options: {
                    url: '/JxAccountHead/GetPages',
                    deleteBtn: true,
                    editBtn: true,
                    addBtn: false,
                    viewBtn: true,
                    searchShow: true,
                    columnBtn: true,
                    excelBtn: true,
                    printBtn: true,
                    searchMenuSpan: 6,
                    menuPosition: 'right',
                    align: 'center',
                    border: true,
                    index: true,
                    indexLabel: '序号',
                    searchLabelWidth: 100,
                    labelWidth: 120,
                    searchList: [
                        {
                            label: '对账单号',
                            prop: 'AccountNo',
                            type: 'input',
                            width: 200
                        },
                        {
                            label: '商业伙伴',
                            prop: 'PartnerName',
                            type: 'input',
                            width: 200
                        },
                        {
                            label: '对账状态',
                            prop: 'AccountStatus',
                            type: 'select',
                            dicData: [
                                { label: '暂存', value: '暂存' },
                                { label: '已对账', value: '已对账' },
                                { label: '已开票', value: '已开票' },
                                { label: '已回款', value: '已回款' }
                            ],
                            width: 120
                        },
                        {
                            label: '开始日期',
                            prop: 'StartDate',
                            type: 'date',
                            format: 'YYYY-MM-DD',
                            width: 150
                        },
                        {
                            label: '结束日期',
                            prop: 'EndDate',
                            type: 'date',
                            format: 'YYYY-MM-DD',
                            width: 150
                        }
                    ],
                    column: [
                        {
                            label: '对账单号',
                            prop: 'AccountNo',
                            search: true,
                            rules: [
                                { required: true, message: '请输入对账单号', trigger: 'blur' }
                            ]
                        },
                        {
                            label: '商业伙伴',
                            prop: 'PartnerName',
                            search: true,
                            type: 'input',
                            rules: [
                                { required: true, message: '请输入商业伙伴名称', trigger: 'blur' }
                            ]
                        },
                        {
                            label: '对账日期',
                            prop: 'AccountDate',
                            type: 'date',
                            format: 'YYYY-MM-DD',
                            valueFormat: 'YYYY-MM-DD',
                            rules: [
                                { required: true, message: '请选择对账日期', trigger: 'change' }
                            ]
                        },
                        {
                            label: '对账状态',
                            prop: 'AccountStatus',
                            search: true,
                            type: 'select',
                            dicData: [
                                { label: '暂存', value: '暂存' },
                                { label: '已对账', value: '已对账' },
                                { label: '已开票', value: '已开票' },
                                { label: '已回款', value: '已回款' }
                            ],
                            editDisplay: false,
                            addDisplay: false,
                            viewDisplay: true
                        },
                        {
                            label: '总金额',
                            prop: 'TotalAmount',
                            type: 'number',
                            min: 0,
                            precision: 2,
                            editDisplay: false,
                            addDisplay: false,
                            viewDisplay: true
                        },
                        {
                            label: '已开票金额',
                            prop: 'InvoiceAmount',
                            type: 'number',
                            min: 0,
                            precision: 2,
                            editDisplay: false,
                            addDisplay: false,
                            viewDisplay: true
                        },
                        {
                            label: '已回款金额',
                            prop: 'PaymentAmount',
                            type: 'number',
                            min: 0,
                            precision: 2,
                            editDisplay: false,
                            addDisplay: false,
                            viewDisplay: true
                        },
                        {
                            label: '备注',
                            prop: 'Remark',
                            type: 'textarea'
                        },
                        {
                            label: '操作',
                            prop: 'action',
                            width: 280,
                            fixed: 'right',
                            type: 'template',
                            template: function (h, params) {
                                var _this = this;
                                var buttons = [
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: function () {
                                                // 查看明细
                                                _this.handleViewDetail(params.row);
                                            }
                                        }
                                    }, '明细'),
                                    params.row.AccountStatus === '暂存' ? h('Button', {
                                        props: {
                                            type: 'success',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: function () {
                                                // 确认对账
                                                _this.handleConfirm(params.row.Id);
                                            }
                                        }
                                    }, '确认对账') : '',
                                    params.row.AccountStatus === '已对账' ? h('Button', {
                                        props: {
                                            type: 'info',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: function () {
                                                // 标记开票
                                                _this.handleInvoice(params.row.Id);
                                            }
                                        }
                                    }, '标记开票') : '',
                                    params.row.AccountStatus === '已开票' ? h('Button', {
                                        props: {
                                            type: 'warning',
                                            size: 'small'
                                        },
                                        on: {
                                            click: function () {
                                                // 标记回款
                                                _this.handlePayment(params.row.Id);
                                            }
                                        }
                                    }, '标记回款') : ''
                                ];
                                return h('div', buttons);
                            }
                        }
                    ],
                    beforeOpen: function (done, type) {
                        // 清空表单验证状态
                        this.$refs.crud.resetForm();
                        done();
                    },
                    success: function (res, type) {
                        if (type === 'add' || type === 'edit' || type === 'del') {
                            this.$message.success(res.Message);
                            this.$refs.crud.refresh();
                        }
                    },
                    updateBtn: {
                        url: '/JxAccountHead/Update',
                        method: 'post'
                    },
                    delBtn: {
                        url: '/JxAccountHead/Delete',
                        method: 'delete'
                    },
                    handleViewDetail: function (row) {
                        // 跳转到明细页面
                        window.location.href = '/JxAccountList?headId=' + row.Id;
                    },
                    handleConfirm: function (id) {
                        var _this = this;
                        this.$confirm('确定要确认该对账单吗？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(function () {
                            axios.post('/JxAccountHead/Confirm', { id: id }).then(function (res) {
                                if (res.data.Code === 200) {
                                    _this.$message.success(res.data.Message);
                                    _this.$refs.crud.refresh();
                                } else {
                                    _this.$message.error(res.data.Message);
                                }
                            });
                        }).catch(function () {
                            _this.$message.info('已取消确认');
                        });
                    },
                    handleInvoice: function (id) {
                        var _this = this;
                        this.$confirm('确定要标记该对账单为已开票吗？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(function () {
                            axios.post('/JxAccountHead/Invoice', { id: id }).then(function (res) {
                                if (res.data.Code === 200) {
                                    _this.$message.success(res.data.Message);
                                    _this.$refs.crud.refresh();
                                } else {
                                    _this.$message.error(res.data.Message);
                                }
                            });
                        }).catch(function () {
                            _this.$message.info('已取消操作');
                        });
                    },
                    handlePayment: function (id) {
                        var _this = this;
                        this.$confirm('确定要标记该对账单为已回款吗？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(function () {
                            axios.post('/JxAccountHead/Payment', { id: id }).then(function (res) {
                                if (res.data.Code === 200) {
                                    _this.$message.success(res.data.Message);
                                    _this.$refs.crud.refresh();
                                } else {
                                    _this.$message.error(res.data.Message);
                                }
                            });
                        }).catch(function () {
                            _this.$message.info('已取消操作');
                        });
                    }
                }
            }
        },
        methods: {
            AddAccount: function () {
                this.$refs.crud.handleAdd();
            }
        },
        mounted: function () {
            // 组件挂载后执行
        }
    });
</script>